<!--
 * @Author: wangming
 * @Date: 2021-10-28 16:22:08
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-18 09:40:41
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/mainContent/formItem_desgic/index.vue
 * @Description:  设计器内部表单外部
--> 
<template>
  <el-col
    :id="config.key"
    :span="config.__config.span"
    class="rel pr12 pl12 mcol sz elbox mover"
    :class="{ hide: config.__config.hide }"
  >
    <div class="operate abs lh1" :class="{ dn: !itemChecked }">
      <div class="ks-row-middle">
        <span class="title wh f12">{{ config.name }}</span>
        <Operatenav
          :parentIndex="parentIndex"
          :index="configIndex"
          :parentList="parentList"
          :configList="configList"
        />
        <div class="title poi" @click.stop="$emit('deltag')">
          <span class="el-icon-delete f12 wh"></span>
        </div>
      </div>
    </div>
    <component :config="config" :form="form" :is="formItemType"></component>
  </el-col>
</template>

<script>
const formItem = () => import("./form.vue");
const unform = () => import("./unform.vue");
import Operatenav from "../__components__/Operatenav.vue";
export default {
  components: { formItem, unform, Operatenav },
  inject: ["parentLayout"],
  props: {
    parentIndex: {
      type: Number,
      default: 0,
    },
    configIndex: {
      type: Number,
      default: 0,
    },
    configList: {
      type: Array,
      default: () => [],
    },
    parentList: {
      default: () => null,
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    itemChecked: {
      // 判断是否被选中
      type: Boolean,
      default: false,
    },
  },
  methods: {
    operateNext() {
      console.log(this.parentList);
    },
  },
  computed: {
    formItemType() {
      return this.parentLayout === "hlLayout" ? "unform" : "formItem";
    },
  },
};
</script>

<style lang="scss" scoped>
.hide {
  background-image: url("~@/assets/image/hide.png");
}
.operate {
  right: 0;
  top: -2px;
}
.mcol {
  min-height: 70px;
  padding-top: 24px;
  &:hover .operate {
    display: inline-block;
  }
}
.title {
  background-color: #1890ff;
  padding: 4px 6px;
}
</style>
